<!--  -->
<template>
  <div class>
    <div class="article">
      <div class="article-head">
        <h1>新增文章</h1>
        <router-link class="ret-button" type="primary" icon="el-icon-delete" to="/Education">
          <img src="../assets/back1.png" alt="">
          <p>返回</p> 
        </router-link>
      </div>
      <section class="article-content">
        <p class="write">
            <input v-model="input2" placeholder="请填写文章信息">
        </p>
        <div class="content-box">
          <p>
            <span>
              标题
              <i>*</i>：
            </span>
            <input type="text" v-model="input3" class="inp1" placeholder="请输入活动标题" />
          </p>
          <p>
            <span style="float:left;">
              列表图片
              <i>*</i>：
            </span>
         
            <el-upload
              action="#"
              list-type="picture-card"
              :auto-upload="false">
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{file}">
                  <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url" alt=""
                  >
                  <span class="el-upload-list__item-actions">
                    <span
                      class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file)"
                    >
                      <i class="el-icon-zoom-in"></i>
                    </span>
                    <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleDownload(file)"
                    >
                      <i class="el-icon-download"></i>
                    </span>
                    <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleRemove(file)"
                    >
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
            <em class="advice">建议尺寸为70*70像素，大小小于2M</em>
          </p>

          <div class="detail">
            <p class="title">内容详情：</p>
           
             <div class="edit"
              use-custom-image-handler
              @image-added="handleImageAdded"
              >
               <vue-editor v-model="content1" />
             </div>
          </div>

          <div class="block">
            <span class="demonstration">上传时间：</span>
            <el-date-picker v-model="value1" type="date" placeholder="2020-08-25"></el-date-picker>
          </div>

          <p class="id1">
            <span>排序号：</span>
            <input type="text" v-model="input4" class="inp1" placeholder="0" />
            <em>请填写数字，数字越大越靠前</em>
          </p>

          <div>
            <div class="btn-save" :plain="true"  @click="clickJump1()">
              <img src="../assets/save1.png" alt="">
              <p>保存</p>
            </div>
            <div class="btn-cancel" :plain="true"  @click="clickJump2()">
              <img src="../assets/ed13.png" alt="">
              <p>取消</p>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { VueEditor } from "vue2-editor";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
      VueEditor 
  },
  name: 'my-textarea',
  data() {
    //这里存放数据
    return {
<<<<<<< HEAD
      content1:"",
=======
>>>>>>> 3bc093edd58b128ae0041a9afe8db1dddd8f800e
      // textarea内容
      value1: '校区环境优雅，简约舒适，电教化一体式互动教学，师生融洽，学习气氛浓郁。校区以高度本地化教育为导向，争取做方圆三公里受孩子喜爱、被家长信任的教育培训机构。让孩子真正的做到爱上学习，收获成长。6个精品小班教学中心，19个VIP个性化学习中心。非翔教育一步一步走进北京家庭，读懂孩子们的期望。请联系我们',
      // 动态高度
      minHeight: '300px',
      count: '' , // 倒计时
      input2: '',
      input3: '',
      input4: '',
      dialogImageUrl: '',
      dialogVisible: false,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleImageAdded: function(file, Editor, cursorLocation, resetUploader) {
      // An example of using FormData
      // NOTE: Your key could be different such as:
      // formData.append('file', file)

      var formData = new FormData();
      // @params file(form 格式)
      formData.append("file", file);

      this.axios({
        url: "http://tt.linweiqin.com/api/tt/aliossUpload",
        method: "POST",
        data: formData
      })
        .then(result => {
          let url = result.data.url; // Get url from response
          Editor.insertEmbed(cursorLocation, "image", url);
          resetUploader();
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    open: function () {
      this.$message({
        message: "保存成功！",
        type: "success",
        center: true,
      });
    },

    //几秒后进入跳转页面
    clickJump1() {
      this.$message({
        message: "保存成功！",
        type: "success",
        center: true,
      });
      const timejump = 1;
      if (!this.timer) {
        this.count = timejump;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= timejump) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
            //跳转的页面写在此处
            this.$router.push({ path: "/Education" });
          }
        }, 600);
      }
    },

    clickJump2() {
      const timejump = 1;
      if (!this.timer) {
        this.count = timejump;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= timejump) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
            //跳转的页面写在此处
            this.$router.push({ path: "/Education" });
          }
        }, 100);
      }
    },
  
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // 跳转选人加分页面
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style>
a {
  text-decoration: none;
  color: #fff;
}
input {
  outline: none;
}
i,
em {
  font-style: normal;
}
.article {
  width: 1100px;
  margin: 0 auto;
  color: #333;
  font-size: 14px;
}
.article-head {
  height: 70px;
}
h1 {
  height: 70px;
  line-height: 70px;
  font-family: "思源黑体 Bold", "思源黑体 Regular", "思源黑体";
  font-weight: 700;
  font-style: normal;
  font-size: 24px;
  color: #9137f3;
  float: left;
}
.ret-button {
  float: right;
  width: 80px;
  height: 34px;
  margin-top: 16px;
  background-color: none !important;
  font-size: 12px;
  line-height: 34px;
  border: 1px solid #9137f3;
  border-radius: 4px;
  color: #9137f3;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
}
.ret-button img {
  float: left;
  margin-top: 10px;
  margin-left: 15px;
}
.ret-button p {
  margin-right: 5px;
}
.article-content {
  border: 1px solid #e4e4e4;
  min-height: 598px;
}
.article-content .write {
  width: 1041px;
  height: 60px;
  font-size: 14px;
  line-height: 60px;
  color: #999;
  margin: 0 auto;
  border-bottom: 1px solid rgba(228, 228, 228, 1);
}
.write input {
  border: none !important;
  width: 1041px;
  height: 60px;
  border-bottom: 1px solid rgba(228, 228, 228, 1) !important;
}
.write input:focus {
  outline: none;
}
.content-box {
  margin-top: 45px;
}
.content-box p {
  height: 40px;
  margin-bottom: 25px;
}
.content-box p span {
  display: inline-block;
  line-height: 38px;
  margin-left: 80px;
}
.content-box p span i {
  color: red;
}
.content-box p input {
  width: 185px;
  height: 37px;
  line-height: 38px;
  padding: 0 10px;
  height: 38px;
  border: 1px solid #e4e4e4;
  border-radius: 0.2em;
  font-size: 14px;
}
.content-box p em {
  font-size: 12px;
}
.el-upload--picture-card {
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
  border-radius: 6px;
  box-sizing: border-box;
  width: 70px;
  height: 70px;
  line-height: 78px;
  vertical-align: top;
  margin-bottom: 15px;
}
.el-upload--picture-card i {
  font-size: 28px;
  color: #8c939d;
  font-weight: bolder;
}
.advice {
  margin-left: 125px;
  color: #999;
}
.saveBtn {
  width: 98px;
  height: 36px;
  background: #9137f3;
  color: #fff;
  line-height: 36px;
  text-align: center;
  margin: 0 auto;
  border-radius: 0.2em;
  margin-top: 122px;
}
.inp1,
.inp2 {
  color: #999;
  font-size: 12px;
  width: 275px;
}
.inp2 {
  color: #333;
  font-size: 24px;
  font-weight: 400px;
  line-height: 38px;
}
.detail {
  margin: 100px 0 0 0;
  min-height: 458px;
}
.detail .title {
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: #333333;
  text-align: left;
  margin-left: 80px;
  float: left;
}
.detail .edit {
  float: left;
  width: 805px;
  height: 422px;
  border: 1px solid rgba(228, 228, 228, 1);
  border-radius: 8px;
  margin-left: 10px;
  overflow: hidden;
}
.ql-editor {
    min-height: 422px!important;
    font-size: 16px;
}
.detail .top {
  height: 50px;
  background: #f2f2f244;
}
.top .icon {
  width: 14px;
  height: 14px;
  line-height: 50px;
  margin-left: 22px;
  float: left;
}
.top .icon img {
  width: 100%;
  height: 100%;
}
.top .icon2 {
  width: 20px;
  height: 20px;
  line-height: 52px;
  margin-left: 22px;
}
.top .icon4 {
  width: 17px;
  height: 17px;
  line-height: 50px;
  margin-left: 22px;
}
.top .icon5 {
  width: 16px;
  height: 16px;
  line-height: 50px;
  margin-left: 22px;
}
.top .icon6 {
  width: 20px;
  height: 20px;
  line-height: 54px;
  margin-left: 22px;
}
.top .icon7 {
  width: 16px;
  height: 16px;
  line-height: 50px;
  margin-left: 22px;
}
.top .icon9 {
  width: 20px;
  height: 20px;
  line-height: 56px;
  margin-left: 22px;
}
.top .icon10 {
  width: 20px;
  height: 20px;
  line-height: 56px;
  margin-left: 22px;
}
.top .icon11 {
  width: 16px;
  height: 14px;
  line-height: 50px;
  margin-left: 22px;
}
.top .icon12 {
  width: 18px;
  height: 18px;
  line-height: 54px;
  margin-left: 22px;
}
.top .icon13,
.top .icon14 {
  width: 16px;
  height: 16px;
  line-height: 50px;
  margin-left: 22px;
}
.block {
  margin-left: 80px;
}
.el-input__inner {
  width: 163px;
  height: 37px;
}
.id1 {
  margin-top: 45px;
  color: #333;
}
.id1 em {
  margin-left: 10px;
  color: #999;
}
.my-textarea {
  text-align: center;
  margin-top: 25px;
  border: none;
}
.my-textarea .textarea {
  display: inline-block;
  width: 760px;
  /*height: 30px;*/
  font-family: '思源黑体';
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  line-height: 26px;
  color: #333333;
  /* resize: none; */
}
textarea {
  border: none;
}
textarea:focus {
  outline: none;
}
.btn-save {
  float: left;
  width: 98px;
  height: 36px;
  line-height: 36px;
  background: inherit;
  background-color: rgba(145, 55, 243, 1);
  border: none;
  border-radius: 6px;
  color: #fff;
  text-align: center;
  margin: 76px 45px 76px 450px;
}
.btn-save img {
  float: left;
  width: 16px;
  height: 16px;
  margin-top: 10px;
  margin-left: 24px;
}
.btn-save p {
  float: left;
  margin-left: 8px;
  font-size: 14px;
}
.btn-cancel img {
  float: left;
  width: 16px;
  height: 16px;
  margin-top: 10px;
  margin-left: 24px;
}
.btn-cancel {
  float: left;
  width: 98px;
  height: 36px;
  line-height: 36px;
  background: inherit;
  background-color: rgba(153, 153, 153, 0.266666666666667);
  border: none;
  border-radius: 6px;
  color: #fff;
  text-align: center;
  margin: 76px auto;
}
.btn-cancel p {
  float: left;
  margin-left: 8px;
  color: #666;
  font-size: 14px;
}
</style>